<template>
  <div class="main-box">
    <div class="check-video">
      <!--提示-->
      <div class="cv-tips">
        <h2>点击下方图标测试录音</h2>
        <span>出现“请求授权”时请点击“允许”，完成测试后开始考试 。</span>
        <!--重新录音-->
        <span class="recorderBtn" v-if="recordBtnStatus === 'play' || recordBtnStatus === 'stop'"  @click="handleRerecordBtnClick">重新录音</span>
      </div>
      <!--测试-->
      <div class="cv-main">
        <div v-if="audioSrc">
          <audio data-type="audio" :src="audioSrc" ref="audio" @ended="handleAudioEnded"></audio>
        </div>
        <div class="cv-step" v-if="recordBtnStatus === 'record'">
          <p>点击图标开始录音</p>
          <span class="mocks-icon icon-record" :class="{'disabled': !isAllowRecord}" @click="handleStartBtnClick">开始录音</span>
        </div>
        <div class="cv-step" v-if="recordBtnStatus === 'recording'">
          <p>点击停止录音</p>
          <span class="mocks-icon icon-stop" :class="{'disabled': !isAllowRecord}" @click="handleStopRecordBtnClick">点击停止录音</span>
        </div>
        <div class="cv-step" v-if="recordBtnStatus === 'play'">
          <p>点击播放录音</p>
          <span class="mocks-icon icon-play" :class="{'disabled': !isAllowRecord}" @click="handlePlayBtnClick">点击播放录音</span>
        </div>
        <div class="cv-step" v-if="recordBtnStatus === 'stop'">
          <p>点击播放录音</p>
          <span class="mocks-icon icon-replay" :class="{'disabled': !isAllowRecord}" @click="handleStopPlayBtnClick">暂停播放</span>
        </div>
        <div class="cv-step pt-30" v-show="showStartTestBtn">
          <button class="layui-btn layui-btn-mocks icon-lg" @click="handleStartMocksBtnClick">开始考试</button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex';
  import MP3Recorder from '../utils/mp3Recorder';

  export default {
    name: "TestVideo",
    data () {
      return {
        showStartTestBtn: false,
        recordBtnStatus: 'record',
        stream: null,
        audio: null,
        audioSrc: '',
        mp3Blob: null,
        isUploading: false,
      }
    },
    mounted () {
      let mp3Recorder = new MP3Recorder({
        CancelCallback: this.CancelCallback,
        SuccessCallback: this.SuccessCallback
      });
      this.updateMp3Recorder(mp3Recorder);
      this.audio = this.$refs['audio'];
    },
    computed: {
      ...mapState([
        'isAllowRecord',
        'paperId',
        'courseId',
        'mp3Recorder'
      ])
    },
    methods: {
      ...mapActions([
        'updateIsAllowReocrd',
        'updateMp3Recorder'
      ]),
      CancelCallback (msg) {
        layer.alert('请点击允许使用麦克风', {title: false});
        // layer.confirm('<img src="../../static/images/dialog_bg.png" style="margin-bottom: 15px" alt="">' +
        //   '<p>您还有未完成的题，<br>确定要进行下一步吗？</p>',{title: false})
        this.updateIsAllowReocrd(false);
      },
      SuccessCallback () {
        this.updateIsAllowReocrd(true);
      },
      handleStartBtnClick () {
        if (this.isAllowRecord) {
          this.recordBtnStatus = 'recording'
          if (this.mp3Recorder) {
            this.mp3Recorder.start();
          }
        }else{
          layer.alert("无法打开麦克风", {title: false});
        }
      },
      handleStopRecordBtnClick () {
        this.recordBtnStatus = 'play';
        this.showStartTestBtn = true;
        if (this.mp3Recorder) {
          this.mp3Recorder.stop()
        }
        this.mp3Recorder.getMp3Blob(blob => {
          this.recordStopCallback(blob);
        });
      },
      handlePlayBtnClick () {
        this.recordBtnStatus = 'stop';
        if (this.audio) {
          this.audio.play();
        }
      },
      handleStopPlayBtnClick () {
        this.recordBtnStatus = 'play';
        if (this.audio) {
          this.audio.pause();
          this.audio.currentTime = 0;
        }
      },
      handleRerecordBtnClick () {
        this.recordBtnStatus = 'recording';
        if (this.audio) {
          this.audio.pause();
        }
        this.audioSrc = '';
        this.audio = null;
        this.mp3Recorder.start();
      },
      recordStopCallback (blob) {
        this.mp3Blob = blob;
        let url  = URL.createObjectURL(this.mp3Blob);
        // var download = new Date().toISOString() + '.mp3';
        this.audioSrc = url;
        if (!this.audio) {
          this.$nextTick(() => {
            this.audio = this.$refs['audio'];
            // this.audio.play();
          })
        }
      },
      handleAudioEnded () {
        this.recordBtnStatus = 'play';
      },
      handleStartMocksBtnClick () {
        if (this.isAllowRecord) {
          if (this.paperId) {
            let _path = `/start/${this.paperId}/${this.courseId}`;
            this.$router.push(_path);
          }
        }
      }
    }
  }
</script>

